{% load staticfiles filter_ext %}

{% if mode == 'grid' %}
    {% with cur_page_range=product_list|get_split_and_range:3 %}
        {% for index in cur_page_range %}
            <ul class="products-grid {{ cur_page_range|get_first_last:index }} {{ index|get_odd_even }}">
                {% with items=product_list|get_sub_list:index %}
                    {% for item in items %}
                        <li class="item {{ items|get_first_last:item }}">
                            <a class="product-image" title="{{ item.name }}" href="{{ item.get_absolute_url }}">
                                <img width="160" height="160" alt="{{ item.name }}" src="{{ item.get_image }}" />
                            </a>
                            <h2 class="product-name">
                                <a title="{{ item.name }}" href="{{ item.get_absolute_url }}">{{ item.name }}</a>
                            </h2>
                            <div class="gender">
                                {% if item.gender %}
                                    <img title="Male" alt="Male" src="{% static "img/i_gender-male.gif" %}" />
                                {% else %}
                                    <img title="Female" alt="Female" src="{% static "img/i_gender-female.gif" %}" />
                                {% endif %}
                            </div>
                            <div class="price-box">
                                <span id="product-price-{{ item.id }}" class="regular-price"><span class="price">{{ item.price }}</span></span>
                            </div>
                            <div class="actions">
                                <button onclick="setLocation('/cart/add/{{ item.slug }}/{{ item.id }}/')"
                                        class="button btn-cart" title="Add to Cart" type="button">
                                    <span><span>Add to Cart</span></span></button>
                            </div>
{#                            <ul class="add-to-links">#}
{#                                <li><a class="link-wishlist" href="http://www.emthemes.com/demo/magento-theme-perfume-store-em0008/index.php/wishlist/index/add/product/167/">#}
{#                                    Add to Wishlist</a></li>#}
{#                                <li><span class="separator">|</span> <a class="link-compare" href="http://www.emthemes.com/demo/magento-theme-perfume-store-em0008/index.php/catalog/product_compare/add/product/167/uenc/aHR0cDovL3d3dy5lbXRoZW1lcy5jb20vZGVtby9tYWdlbnRvLXRoZW1lLXBlcmZ1bWUtc3RvcmUtZW0wMDA4L2luZGV4LnBocC9wZXJmdW1lLmh0bWw,/">#}
{#                                    Add to Compare</a></li>#}
{#                            </ul>#}
                        </li>
                    {% endfor %}
                {% endwith %}
            </ul>
        {% endfor %}
    {% endwith %}
    <script type="text/javascript">
        decorateGeneric($$('ul.products-grid'), ['odd', 'even', 'first', 'last'])
    </script>
{% else %}
    <ol class="products-list" id="products-list">
        {% for index in product_list|length|get_range %}
            {% with item=product_list|get_item:index %}
                <li class="item {{ product_list|get_first_last:item }} {{ index|get_odd_even }}">
                    <a href="{{ item.get_absolute_url }}" title="Aqua Allegoria" class="product-image">
                        <img src="{{ item.get_image }}" width="160" height="160" alt="{{ item.name }}" nosudispl="1">
                        <div style="display: block; width: 20px; height: 75px">
                        </div>
                    </a>
                    <div class="product-shop">
                        <div class="f-fix">
                            <h2 class="product-name"><a href="{{ item.get_absolute_url }}" title="{{ item.name }}">{{ item.name }}</a></h2>



                            <div class="price-box">
                                                            <span class="regular-price" id="product-price-{{ item.id }}">
                    <span class="price">{{ item.price }}</span>                </span>

                            </div>

                            <p><button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('/cart/add/{{ item.slug }}/{{ item.id }}/')"><span><span>Add to Cart</span></span></button></p>
                            <div class="desc std">
                                <p>{{ item.description }}﻿</p>                        <a href="{{ item.get_absolute_url }}" title="{{ item.name }}" class="link-learn">Learn More</a>
                            </div>
                            <ul class="add-to-links">
{#                                <li><a href="http://www.emthemes.com/demo/magento-theme-perfume-store-em0008/index.php/wishlist/index/add/product/167/" class="link-wishlist">Add to Wishlist</a></li>#}
{#                                <li><span class="separator">|</span> <a href="http://www.emthemes.com/demo/magento-theme-perfume-store-em0008/index.php/catalog/product_compare/add/product/167/uenc/aHR0cDovL3d3dy5lbXRoZW1lcy5jb20vZGVtby9tYWdlbnRvLXRoZW1lLXBlcmZ1bWUtc3RvcmUtZW0wMDA4L2luZGV4LnBocC9wZXJmdW1lLmh0bWw_bGltaXQ9NQ,,/" class="link-compare">Add to Compare</a></li>#}
                            </ul>
                        </div>
                    </div>
                </li>
            {% endwith %}
        {% endfor %}
    </ol>
    <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
{% endif %}